<template>
	<view class="LoginDialog">
		<uni-popup ref="LoginDialog" type="bottom" background-color="#222224" border-radius="3vw 3vw 0 0" style="height: auto; z-index: 9999" @change="changePopupShow">
			<view class="popup-view">
				<view class="popup-title">登录方式</view>
				<view class="popup-main" style="height: auto">
					<view class="cont-btn">
						<!-- #ifdef MP-WEIXIN  -->
						<view class="btn style1" v-if="isCheck">
							<button class="getPhoneNumberBtn" ref="getPhoneNumberBtn" style="font-size: 32rpx" open-type="getPhoneNumber" @getphonenumber="getphonenumber">{{ "手机号快捷登录" }}</button>
						</view>
						<view class="btn style1" v-else @tap="isCheckFlag">
							<view class="text">{{ "手机号快捷登录" }}</view>
						</view>
						<!-- #endif -->
						<view class="btn style1" @tap="toLoginPage">
							<view class="text">账号密码登录</view>
							<!-- <image class="huojian" :src="imgPath + 'login/huojian.png'" mode="widthFix"></image> -->
						</view>
					</view>
					<view class="f" @tap="isCheck = !isCheck">
						<view class="check">
							<radio :checked="isCheck" color="#00997f" />
						</view>
						<text class="text">已阅读并同意</text>
						<text class="text2" @tap.stop="toAgreement('https://ai.yainoo.com/videoagent/moderzip/Yainoo_Protocol/【' + companyName + 'AIGC创作平台】用户协议.html')">《用户协议》</text>
						<text class="text">和</text>
						<text class="text2" @tap.stop="toAgreement('https://ai.yainoo.com/videoagent/moderzip/Yainoo_Protocol/隐私政策(' + companyName + ').html')">《隐私协议》</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="confirmDialog" type="dialog">
			<uni-popup-dialog mode="getPhoneNumber" title="温馨提示" :confirmText="'同意'" :beforeClose="false" :showClose="true" @close="$refs.confirmDialog.close()" @confirm="confirmAgreement">
				<view class="tips" style="color: #000">
					<text class="text">您是否同意</text>
					<text class="text2" @tap.stop="toAgreement('https://ai.yainoo.com/videoagent/moderzip/Yainoo_Protocol/【' + companyName + 'AIGC创作平台】用户协议.html')">《用户协议》</text>
					<text class="text">和</text>
					<text class="text2" @tap.stop="toAgreement('https://ai.yainoo.com/videoagent/moderzip/Yainoo_Protocol/隐私政策(' + companyName + ').html')">《隐私协议》</text>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import * as api from "@/api/login.js";
import { tools } from "../../utils/util";
export default {
	name: "LoginDialog",
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			imgPath: tools.imgPath,
			companyName: tools.companyName,
			isCheck: false,
		};
	},
	methods: {
		// 同意协议
		confirmAgreement(e) {
			this.$refs.confirmDialog.close();
			this.isCheck = true;
			this.getphonenumber(e);
		},
		// 跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		// 跳转登录
		toLoginPage() {
			// let flag = this.isCheckFlag();
			// if (!flag) return;
			this.$emit("changeShow", false);
			this.toPage("/pages/login/login");
		},
		// 手机号登录tapFn
		isCheckFlag() {
			if (!this.isCheck) {
				// tools.easyToast("请先同意用户隐私协议！");
				this.$refs.confirmDialog.open();
				return false;
			} else {
				return true;
			}
		},
		// 获取手机号登录
		async getphonenumber(e) {
			console.log("获取手机号登录", e, e.detail.code);
			this.codeText = e.detail.code;
			// let hostValue = "";
			// if (tools.companyName == "随拍") {
			// 	hostValue = "47.121.176.211";
			// } else if (tools.companyName == "默客") {
			// 	hostValue = "47.121.185.165";
			// }
			let send = {
				headImg: "",
				phoneCode: this.codeText,
				nickName: "",
				reqType: "applet",
				regCode: "",
				hostValue: tools.vadIp,
				vadIp: tools.vadIp,
				password: "",
				iphone: ""
			};
			let regCode = uni.getStorageSync("sharerInfo");
			if (regCode) {
				send.regCode = regCode;
				uni.removeStorageSync("sharerInfo");
			}
			console.log("获取手机号登录", { regCode, send });
			let res = null;
			if (tools.vadIp == "121.196.245.10") {
				send.special = "";
				res = await api.lsPostAuthLoginWX(send, {
					header: {
						"Merchant-Id": tools.MerchantId || tools.merchantId || ""
					}
				});
			} else {
				res = await api.postAuthLoginWX(send);
			}
			if (res) {
				uni.setStorageSync("token", res.data.token);
				uni.setStorageSync("userInfo", JSON.stringify(res.data));
				tools.easyToast("登录成功！", "success");
				await this.getUserVipStatus();
				setTimeout(() => {
					this.$emit("successFn");
					this.$emit("changeShow", false);
				}, 1680);
			}
		},
		// 获取用户会员
		async getUserVipStatus() {
			const res3 = await api.getUserVipStatus();
			if (!res3) return;
			let userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
			let resData = res3.data;
			userInfo.vipName = resData[resData.length - 1]?.memberName;
			userInfo.vipTime = resData[resData.length - 1]?.finalTime;
			userInfo.vipId = resData[resData.length - 1]?.memberType;
			userInfo.vipIds = res3.data.map((e) => e.memberType);
			// userInfo.vipIds = [
			//     "1732410233318158337",
			//     "1738862163041185793"
			// ]

			//终端个人详情页
			const res = await api.getHomeDetailInfo();
			if (!res) return;
			userInfo.detailInfo = res.data;
			userInfo.goldNum = res.data.rightList.find((e) => e.rightsName == "金币" || e.id == "1741564651566090455")?.totalRightBalance ?? 0;
			userInfo.detailInfoRightList = res.data.rightList.map((e) => {
				switch (e.id) {
					// "短视频时长"
					case "1":
						e.totalRightBalance = (e.totalRightBalance / 60000).toFixed(2) + "分钟";
						break;
					// "直播合成时长"
					case "1710556060574937089":
						e.totalRightBalance = (e.totalRightBalance / 60000).toFixed(2) + "分钟";
						break;
					// "金币"
					case "1741564651566090455":
						e.totalRightBalance += "个";
						break;
					// ""
					default:
						e.totalRightBalance += "次";
						break;
				}
				return e;
			});
			uni.setStorageSync("userInfo", JSON.stringify(userInfo));
		},
		// 监听弹出层显示
		changePopupShow(event) {
			this.$emit("changeShow", event.show);
		},
		// 跳转协议页面
		toAgreement(url) {
			uni.setStorageSync("AgreementURL", url);
			this.toPage("/pages/Agreement/Agreement");
		}
	},
	watch: {
		show(val) {
			if (val) {
				this.$refs.LoginDialog.open();
			} else {
				this.$refs.LoginDialog.close();
			}
		}
	}
};
</script>

<style lang="scss">
button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	&::after {
		border: none;
	}
}
.LoginDialog {
	bottom: {
		margin: auto;
		border: none;
	}
	.f {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 6vw;
		padding-bottom: 8vw;
		.check {
			width: 5vw;
			margin-right: 2.5vw;
			.icon {
				width: 100%;
				display: block;
			}
		}
		.text {
			font-size: 3vw;
			color: rgba(166, 166, 166, 1);
		}

		.text2 {
			font-size: 3vw;
			color: rgba(255, 255, 255, 1);
		}
	}

	.cont-btn {
		flex: 1;
		box-sizing: border-box;
		padding-top: 0vh;

		.btn {
			margin-top: 5.2vw;
			height: 12vw;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 2.5vw;
			font-size: 32rpx;

			.getPhoneNumberBtn {
				width: 100%;
				height: 100%;
				padding-left: 0;
				padding-right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			&.style1 {
				background: rgba(0, 153, 127, 1);
				position: relative;

				.text {
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}

				.huojian {
					width: 30%;
					position: absolute;
					bottom: 0vw;
					right: 2.5vw;
				}
			}

			&.style2 {
				background: transparent;
				height: 8vw;

				.text {
					color: rgba(0, 153, 127, 1);
				}
			}
		}
	}

	.popup-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 5vw;
		overflow: auto;
		.text-box {
			margin-bottom: 5vw;

			.text1 {
				color: #fff;
				font-size: 4vw;
			}

			.text2 {
				margin-top: 2vw;
				font-size: 3vw;
				color: #7c7c7c;
			}
		}
		.cont-list {
			.cont-item {
			}
		}
		.btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.btn {
				// width: 46.8%;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 15vw;
				margin: 5.2vw 0vw;
				border-radius: 2.5vw;
				font-weight: bold;
				&:nth-child(1) {
					margin-right: 1vw;
				}
			}
			.style1 {
				background: #313133;
				color: #fff;
			}
			.style2 {
				background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
				color: #000;
				margin-left: 1vw;
			}
		}

		.popup-title {
			padding-top: 5vw;
			color: #fff;
			text-align: center;
		}
		.popup-main {
			height: 68vh;
			overflow: auto;
			box-sizing: border-box;
			padding: 2vw;
			.cont-list {
				.item {
					background: rgba(126, 126, 126, 0.186);
					box-sizing: border-box;
					padding: 5vw;
					border-radius: 2.5vw;
					width: 100%;
					margin-bottom: 3vw;
					color: #fff;
					font-size: 3.68vw;
					font-weight: 100;
					text-indent: 2em;

					&.ac {
						border: 1vw solid #98c379;
					}
				}
			}
			.opt-list {
				.item {
					width: 100%;
					margin-bottom: 6vw;
					.title {
						color: #fff;
						font-size: 3.68vw;
						font-weight: 100;
					}
					.slider {
					}
				}
			}
		}
		.people-subBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
			width: 90%;
			height: 15vw;
			margin: 5.2vw auto;
			border-radius: 2.5vw;
			color: #000;
			font-weight: bold;
		}

		.audio-list {
			// flex: 1;
			overflow: auto;
			display: -webkit-box;

			.audio-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 0vw 1vw;
				height: max-content;
				border-radius: 1.5vw;

				&.ac {
					border: 1px solid #00deb9;
				}

				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					height: 100%;

					.pic-box {
						width: 20vw;
						height: 100%;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;

						.audio-pic {
							width: 15vw;
							height: 15vw;
							display: block;
							border-radius: 50%;
						}

						.playStatusIcon {
							position: absolute;
							left: 0vw;
							top: 0vw;
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;

							.icon {
								width: 8.6vw;
								height: 8.6vw;
								display: block;
							}
						}
					}

					.date-time {
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
				}

				.right {
					display: none;
					justify-content: center;
					align-items: center;
					height: 100%;

					.time {
					}

					.icon {
						width: 5vw;
						height: 5vw;
						display: block;
						padding: 0vw 3vw;
					}

					.useBtn {
						background: linear-gradient(270deg, #00deb9 0%, #7affe9 100%);
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 100vw;
						padding: 1vw 2vw;

						.useBtn-text {
							font-size: 3.5vw;
							color: #111;
						}
					}
				}
			}
		}
	}

	.tips {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 4.6vw 0vw;
		font-size: 3vw;

		&.style2 {
			background: rgba(0, 0, 0, 0.286);
			padding: 1.6vw 0vw;
		}
		.text1 {
			color: #000;
			font-size: 3.5vw;
			text-align: center;
			margin-bottom: 2vw;
		}
		.text2 {
			color: #000;
			font-weight: 700;
			font-size: 3.5vw;
			text-align: center;
			border-bottom: 1px solid #000;
		}
	}
}
</style>
